import React, { FC } from 'react'
import { Button, Typography, Space, Tooltip, message } from 'antd'
import {ActionCreators} from 'redux-undo'
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
  UpOutlined,
  DownOutlined,
  UndoOutlined,
  RedoOutlined
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import {
  removeSelectedComponent,
  changeComponentHidden,
  toggleComponentLock,
  copySelectedCompoent,
  pasteSelectedCompoent,
  moveCompoent

} from '../../../store/componetnsReducer'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
const EditToolbar: FC = () => {
  const dispatch = useDispatch()
  const { selectedId, selectedCopmonent, copiedComponent,componetnList } = useGetComponentInfo()
  const { isLocked } = selectedCopmonent || { isLocked: false }
  const length=componetnList.length
  const selectedIndex=componetnList.findIndex(c=>c.fe_id===selectedId)
  const isFirst=selectedIndex<=0 //第一个
  const isLast=selectedIndex>=(length-1) //最后一个
  // 删除组件
  const handleDelete = () => {
    dispatch(removeSelectedComponent())
  }
  // 隐藏组件
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: true }))
  }
  //锁定组件
  function handleLock() {
    dispatch(toggleComponentLock({ fe_id: selectedId }))
  }
  //复制
  function copy() {
    dispatch(copySelectedCompoent())
  }
  //粘贴
  function paste() {
    dispatch(pasteSelectedCompoent())
  }
  //上移
  const handleUp = () => {
    if(isFirst) return message.error('已经是第一个了')
    dispatch(moveCompoent({oldIndex:selectedIndex,newIndex:(selectedIndex-1)}))
  }
  //下移
  const handleDown=()=>{
    if(isLast) return message.error('已经是最后一个了')
    dispatch(moveCompoent({oldIndex:selectedIndex,newIndex:(selectedIndex+1)}))
  }
  //撤销
  function undo(){
    dispatch(ActionCreators.undo())
  }
  //重做
  function redo(){
    dispatch(ActionCreators.redo() )
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete}></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden}></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLock}
          type={isLocked ? 'primary' : 'default'}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={copy}></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={paste}
          disabled={copiedComponent == null}
        ></Button>
      </Tooltip>
      <Tooltip title="上移">
        <Button
          shape="circle"
          icon={<UpOutlined />}
          onClick={handleUp}
          disabled={isFirst}
        ></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          shape="circle"
          icon={<DownOutlined />}
          onClick={handleDown}
          disabled={isLast}
        ></Button>
      </Tooltip>
      <Tooltip title="撤销">
        <Button
          shape="circle"
          icon={<UndoOutlined />}
          onClick={undo}
        ></Button>
      </Tooltip>
      <Tooltip title="取消撤回">
        <Button
          shape="circle"
          icon={<RedoOutlined />}
          onClick={redo}
        ></Button>
      </Tooltip>
    </Space>
  )
}
export default EditToolbar
